<template>
  <view class="att-view">
    <scroll-view style="width: 100vw;height: 100vh;" scroll-y="true" lower-threshold="50" @scrolltolower="getMoreAttention">
      <view class="att-item" v-for="item in data.attList">
        <image class="att-avatar" lazy-load="true" :src="item.userAvatar" @click="showOtherInfo(item.userId)"></image>
        <view class="user-info">
          <text class="user-name">{{item.userName}}</text>
          <text class="att-text">开始关注你了 {{item.time}}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,computed } from 'vue';
import { onShow,onLoad,onUnload,onHide } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'

const data = reactive({
  attList:[],
  totalAtt:0,
  pageNum:0,
  pageSize:10,
});

onLoad(()=>{
  getMyAttention()
})

function getMyAttention(){
  uni.request({
    url: helper.webUrl + "/attention/getMyAttentionMsg",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        data.totalAtt = res.data.data.total
        let list = res.data.data.record
        for(let i = 0; i < list.length; i++){
          list[i].time = helper.getDate(list[i].time)
          data.attList.push(list[i])
        }
        data.pageNum++
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getMoreAttention(){
  console.log("获取更多的关注信息")
  if(data.totalAtt > data.attList.length){
    getMyAttention()
  }
}

function showOtherInfo(userId){
  console.log("查看用户")
  uni.navigateTo({
    url:"/subpages/otherInfo/otherInfo?userId="+userId
  })
}
  
</script>

<style>
.att-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.att-item{
  width: 100vw;
  height: 12vh;
  padding: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.att-avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 10px;
}
.user-info{
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.user-name{
  font-size: 18px;
  font-weight: bold;
}
.att-text{
  color: #949494;
  margin-top: 5px;
}
</style>
